<template>
  <div class="user-list">
    <!-- 查询表单 -->
    <a-row :gutter="16" class="product-row">
      <a-col :span="8">
        <a-input v-model="username" placeholder="用户名" addon-before="用户名" />
      </a-col>
      <a-col :span="24" style="margin: 16px 0px">
        <a-button type="primary" @click="handleSearch">查询</a-button>
        <a-button @click="handleReset" style="margin-left: 8px;">重置</a-button>
      </a-col>
    </a-row>

    <!-- 表格 -->
    <a-table :data-source="usersdate" :columns="columns" row-key="id" :pagination="false">
      <template #avatar="{ record }">
        <a-avatar :src="record.avatar" />
      </template>
      <template #action="{ record }">
        <a @click="handleDetail(record)">详情</a>
      </template>
    </a-table>

    <!-- 用户详情模态框 -->
    <a-modal title="用户详情" :visible="isDetailModalVisible" @ok="handleDetailModalCancel" @cancel="handleDetailModalCancel">
      <p>用户编号：{{ record.userId }}</p>
      <p>账号：{{ record.username }}</p>
      <p>昵称：{{ record.nickname || '暂无' }}</p>
      <p>手机号码：{{ record.phone }}</p>
      <p>地址：{{ record.address }}</p>
      <p>创建时间：{{ record.createdAt }}</p>
    </a-modal>
  </div>
</template>

<script>
import {
  Row, Col, Input, Button, Table,
  Avatar, Modal
} from 'ant-design-vue';
import { METHOD, request } from "@/utils/request";

export default {
  components: {
    'a-row': Row,
    'a-col': Col,
    'a-input': Input,
    'a-button': Button,
    'a-table': Table,
    'a-avatar': Avatar,
    'a-modal': Modal
  },
  data() {
    return {
      username: '',
      isDetailModalVisible: false,
      record: {},
      usersdate: [],
      columns: [
        { title: '用户编号', dataIndex: 'userId', key: 'userId' },
        { title: '头像', dataIndex: 'avatar', key: 'avatar', scopedSlots: { customRender: 'avatar' } },
        { title: '昵称', dataIndex: 'nickname', key: 'nickname' },
        { title: '账号', dataIndex: 'username', key: 'username' },
        { title: '手机号码', dataIndex: 'phone', key: 'phone' },
        { title: '地址', dataIndex: 'address', key: 'address' },
        { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
        { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } }
      ],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const res = await request(
            'http://localhost:8080/api/user/all',
            METHOD.GET,
            {},
            {
              headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`
              }
            }
        );
        this.usersdate = res.data.data || [];
      } catch (err) {
        console.error(err);
        this.$message.error('用户列表加载失败');
      }
    },
    handleSearch() {
      this.fetchData();
    },
    handleReset() {
      this.username = '';
      this.fetchData();
    },
    handleDetail(record) {
      this.record = record;
      this.isDetailModalVisible = true;
    },
    handleDetailModalCancel() {
      this.isDetailModalVisible = false;
    }
  }
};
</script>

<style scoped>
.product-row {
  margin-bottom: 20px;
}
</style>
